<style>
    body { background: #fff; }
    #table { height: 400px; overflow-y: scroll}
    #table th {}
</style>
<div id="table">
<table class="uk-table  uk-table-responsive  uk-table-striped uk-table-hover uk-table-middle dux-table dux-table-dialog">
    <thead>
    <tr>
        <th>标题</th>
        <th width="150">语音</th>
        <th class="uk-text-center" width="50">选择</th>
    </tr>
    </thead>
    <tbody>
    <!--loop{$list as $vo}-->
    <tr>
        <td>{$vo.title ? $vo.title : $vo.media_id}</td>
        <td>
            <audio controls="controls">
                <source src="{$vo.url}" />
            </audio>
        </td>
        <td class="uk-text-center">

            <a class="uk-button uk-button-primary uk-button-small" href="javascript:;"
               data-media="{$vo.media_id}" data-title="{$vo.title ? $vo.title : $vo.media_id}" data-url="{$vo.url}" data-select="">选择</a>
        </td>
    </tr>
    <!--{/loop}-->
    </tbody>
</table>
</div>
<div class="dux-page-foot uk-clearfix">
    {$page}
</div>

<script>
    Do('base', function () {
        $('[data-select]').click(function() {
            var mediaId = $(this).data('media');
            window.parent.selectVoice(mediaId, $(this).data('title'), $(this).data('url'));
            parent.dialog.close();
        });

    });
</script>